<template>
	<div id="flightOrder">
		<Load v-if="loading"></Load>
		<div>
			<div class="top">
				<div class="query">
					<div class="querys">
						<p>
							<span>订单号</span>
							<el-input v-model="query.orderNumber" size="mini"></el-input>
						</p>
						<p>
							<span>乘机人</span>
							<el-input v-model="query.buyerName" size="mini"></el-input>
						</p>
						<p>
							<span>预定日期</span>
							<el-date-picker
						      type="date"
						      v-model="query.toStartDate"
						      size="mini">
						    </el-date-picker>
						</p>
						<p>
							<span>至</span>
							<el-date-picker
						      type="date"
						      v-model="query.toEndDate"
						      size="mini">
						    </el-date-picker>
						</p>
					</div>
					<div>
						<el-button @click="search" class="search" type="primary">查询</el-button>
					</div>
				</div>
				<div class="query">
					<div class="querys">
						<p>
							<span><i style='color:transparent'>票</i>票号</span>
							<el-input v-model="query.ticketNo" size="mini"></el-input>
						</p>
						<p>
							<span>手机号</span>
							<el-input v-model="query.mobile" size="mini"></el-input>
						</p>
						<p>
							<span>出发时间</span>
							<el-date-picker
						      type="date"
						      v-model="query.tos"
						      size="mini">
						    </el-date-picker>
						</p>
						<p>
							<span>至</span>
							<el-date-picker
						      type="date"
						      v-model="query.toe"
						      size="mini">
						    </el-date-picker>
						</p>
						<p>
							<span>PNR编码</span>
							<el-input v-model="query.pnr" size="mini"></el-input>
						</p>
					</div>
					<div>
						<el-button @click="exportOrder" class="export" type="primary">导出订单</el-button>
					</div>
				</div>
			</div>
			<div class="middle">
				<p>状态：</p>
				<p :class="{'active':stat.key==active}" @click="chooseStatus(stat.key)" v-for="stat in status">{{stat.name}}</p>				
			</div>
			<div class="bottom">
				<table>
					<tr>
						<th>航班号</th>
						<th>行程</th>
						<th>出发日期</th>
						<th>票号</th>
						<th>乘机人</th>
						<th>订单实付金额</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					<tbody v-for="order in data">
						<tr class="title">
							<td colspan="8">
								<div class="left">
									<span>订单号：</span>
									<span class="orderId" @click="detail(order)">{{order.orderNumber}}</span>
									<span class="tui">退</span>
									<span class="gai">改</span>
									<span class="bao">保</span>
								</div>
								<div class="right">
									<span>供应商：</span>
									<b style="margin-right: 20px;">{{order.sellerName}} </b>
									<span> 预定日期：</span>
									<b>{{order.orderCreateTime}}</b>
								</div>
							</td>							
						</tr>
						<tr>
							<td>{{order.list[0].airlineNumber}}</td>
							<td class="city">{{order.list[0].fromCityCn}}-{{order.list[order.list.length-1].toCityCn}}</td>
							<td>{{order.list[0].deptDate}}</br>{{order.list[0].deptTime}}</td>
							<td>
								<span v-for="ticketNo in order.ticketNoList">{{ticketNo}}</span>
							</td>
							<td>
								<span v-for="passenger in order.passengerList">{{passenger}}</span>
							</td>
							<td class="count">{{order.sum}}</td>
							<td class="status">
								<span>{{order.orderStatus|orderStatus}}</span>
								<span>{{order.otherStatus|otherStatus}}</span>
							</td>
							<td>
								<el-button @click="editOrder" class="changeOrder">修改订单</el-button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="pagination">
				<el-pagination
				    layout="prev, pager, next"
				    @current-change='pageChange'
				    :page-size='query.rows'
				    :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import "../../../style/mixin.scss";
	@import "./style.scss";
</style>